import "./public-path";
import Vue from "vue";

import CategorySelector from "@/components/CategorySelector";

import "normalize.css/normalize.css"; // A modern alternative to CSS resets

import "@/styles/index.scss"; // global css

import App from "./App";
import store from "./store";
import router from "./router";

import "@/icons"; // icon
import "./plugins/element.js";

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
// if (process.env.NODE_ENV === 'production') {
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

let vm = null;
function render(props = {}) {
  const { container } = props;

  // 全局注册组件
  Vue.component("CategorySelector", CategorySelector);

  Vue.config.productionTip = false;
  // 添加全局事件总线对象
  Vue.prototype.$bus = new Vue();

  vm = new Vue({
    el: container ? container.querySelector("#app") : "#app",
    router,
    store,
    render: (h) => h(App),
  });
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap(props) {}
export async function mount(props) {
  // 读取全局状态
  const state = props.actions.getGlobalState();
  // 更新
  store.commit("user/SET_TOKEN", state.token);

  render(props);
}
export async function unmount() {
  vm.$destroy();
  vm.$el.innerHTML = "";
  vm = null;
}
